:root {
  /* Color palette */
  /* crimson sky */
  --main: #CF6766;
  
  --dark_main: #CA6665;
  
  /* indigo */
  --secondary: #30415D;
  
  /* ultramarine */
  --text: #031424;
  
  /* light blue */
  --highlight: #8EAEBD;
  
  /* background gray */
  --background: #E8E8E8;
  
  
   /* Other variables */
  --header_height: 7vh;
  --iconbox_size: 4vh;
  --iconbox_inner_size: 3.05vh;
  --border_size: 0.2vw;
  --font_size:  calc(4vw / 3);
 
  --column_padding: 10vw;
  --column_separation: 2vw;

  --node_hover_transition: 300ms;
  --node_padding : 2vw;
}

/* General stuff */
body {
	font-family: 'Roboto Mono', monospace; 
	font-weight:normal;
	font-size: var(--font_size);
	background-color: var(--background);
	top: 0;
    left: 0;
}

/* Header Content */
header {
	justify-content: left;
    display: flex nowrap ;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header_height);
    line-height: var(--header_height);
	background-color: var(--main);
	z-index: 100;
}

header * {
	
    display: inline;
    height: var(--header_height);
	text-decoration: none;
	color: var(--text);
}

header ul {
	
	margin-left: 7vw;
	height: var(--header_height);
	 
}

.home-button {

	display: none;
	
}

.menu-toggle {

	display: none;

}

/* Header menu buttons */
#Menus li a {
	
	text-align: center center;
	padding: 0px 0.5vw calc((var(--header_height)/2) - var(--font_size)) 0.5vw; 
	
    margin-right: 10px;
	background-color: var(--main);
	border-bottom: var(--border_size) solid var(--main); 
	transition: border-bottom 300ms, background-color 300ms; 

}

#Menus li a:hover {
	background-color: var(--main);
	border-bottom: var(--border_size) solid var(--text);
	transition: border-bottom 300ms, background-color 300ms; 

}

#Menus li a.active {
	background-color: var(--main);
	border-bottom: var(--border_size) solid var(--text);
	transition: border-bottom 300ms, background-color 300ms; 
	
}

/* External icons */
#Contact {
	
	position:relative;
	left: 75vw;	
	
	display: flex;
	flex-direction: row;
	justify-content: space-around; 
	width: 15vw;
	
	align-items: center; 
	text-align: center;
}

.icon-box {
	
	display: flex;
	justify-content: center; 
	align-items: center; 
	text-align: center;
	
	height: var(--iconbox_size);
	width:	var(--iconbox_size);			
	
	background-color:var(--main);
	border: var(--border_size) solid var(--text);
	position: relative;
	
	top: calc(var(--header_height) * -1);
	
	transition: border 200ms, background-color 200ms;
	
	overflow:hidden;
}

.icon-box:hover {
		
	background-color:var(--text);
	border:var(--border_size) solid var(--text);
	position: relative;
	
}

.icon-img {
	
	position:absolute;
	
	right: 12%;
	bottom: 12%;
	
	width: var(--iconbox_inner_size);
	height: var(--iconbox_inner_size);
	
	
}

.icon-box:hover .icon-img-hover {
		
	opacity: 0;
}


/* columns */
.node-columns {
	display: flex;
	flex-direction: row;
	column-count: 3;
	align-items: start;
	justify-content: center;

	padding-right: 12vw;
	padding-left: 12vw;
}

.node-column {
	display: flex;
	flex-direction: column;
	
	align-items: start;
	justify-content: center;
	
}


/* Nodes */

.portfolio-node {
	width: auto;
	height: auto;

	display: inline-block;
	flex-direction: column;

	justify-content: bottom; 
	align-items: center; 
	text-align: bottom;

	border-width: var(--border_size);
	border-color: var(--dark_main);
	border-style: solid;

	background-color: var(--background);

	text-decoration: none;

	padding: var(--node_padding);

	margin: 3vh;
	
	overflow: hidden;

	transition: all var(--node_hover_transition);

}

.portfolio-node:hover {

	transform: translateY(-1.5vh);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: all var(--node_hover_transition);

}

.node-img {

	position: relative;
	left: calc(var(--node_padding) * -1);
	top:  calc(var(--node_padding) * -1);
	width: calc(100% + (var(--node_padding)*2));
	height: 25vh;
	object-fit: cover;
	filter: grayscale(70%);
	transition: all var(--node_hover_transition);

	border-bottom: solid var(--border_size) var(--dark_main);
}

.portfolio-node:hover .node-img {

	filter: grayscale(0%);
	transition: all var(--node_hover_transition);
}

.node-name {

	font-size: calc(var(--font_size) * 1.4);
	color: var(--secondary);
	margin-top: 0.5vh;
	margin-bottom: 0.2vh;

	border-bottom: solid var(--border_size) var(--secondary);
}

.node-description{

	font-size: var(--font_size);
	color: var(--text);
	text-decoration: none;
	margin-top: 2vh;
	margin-bottom: 0.2vh;
}

.node-tag-box {

	margin-top: 3vh;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: start;
}

.node-tag {

	font-size: calc(var(--font_size)/1.3);

	word-wrap: normal;
	height: auto;
	width: auto;
	padding-left: 0.4vw;
	padding-right: 0.4vw;

	margin: 0 0.4vw 1vh 0;

	border: solid var(--highlight) calc(var(--border_size)/1.3);
	border-radius: 2em;

	color: var(--highlight);
}